<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>easyui rowediting</title>
    <link rel="stylesheet" type="text/css" href="/easyui.css">
    <link rel="stylesheet" type="text/css" href="/icon.css">
    <link rel="stylesheet" type="text/css" href="/demo.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Row Editing in DataGrid</h2>
    <p>Click the row to start editing.</p>
    <div style="margin:20px 0;"></div>
    <table id="dg">
        <thead>
        <tr>
            <th data-options="field:'itemid',width:80,sortable:true" >Item ID</th>
            <th data-options="field:'productid',width:100 , editor:'textbox',sortable:true ">Product</th>
            <th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}},sortable:true">List Price</th>
            <th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox',sortable:true">Unit Cost</th>
            <th data-options="field:'attr1',width:250,editor:'textbox'">Attribute</th>
            <th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
        </tr>
        </thead>
        <div id="tb" style="height:auto">
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">Append</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">Remove</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
        </div>
        <tbody>
        <tr>
            <td>EST-1</td><td>FI-SW-01</td><td>125.2</td><td>36.50</td><td>Large</td><td>p</td>
        </tr>
        <tr>
            <td>EST-10</td><td>K9-DL-01</td><td>125.2</td><td>18.50</td><td>Spotted Adult Female</td><td>p</td>
        </tr>
        <tr>
            <td>EST-11</td><td>RP-SN-01</td><td>125.2</td><td>28.50</td><td>Venomless</td><td>p</td>
        </tr>
        <tr>
            <td>EST-12</td><td>RP-SN-01</td><td>125.2</td><td>26.50</td><td>Rattleless</td><td>p</td>
        </tr>
        <tr>
            <td>EST-13</td><td>RP-LI-02</td><td>125.2</td><td>35.50</td><td>Green Adult</td><td>p</td>
        </tr>
        </tbody>

    </table>

    <script type="text/javascript">
        $("#dg").datagrid({
            title:"Row Editing in DataGrid",
            width:700,
            iconCls: 'icon-edit',
            singleSelect: true,
            toolbar: '#tb',
            multiSort:true,
            remoteSort:false,
//           用户在点击一个单元格的时候触发
            onClickCell:function(index, field){
            if (editIndex != index){
                if (endEditing()){
                    $('#dg').datagrid('selectRow', index)
                        .datagrid('beginEdit', index);
                    var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
                    if (ed){
                        ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                    }
                    editIndex = index;
                } else {
                    setTimeout(function(){
                        $('#dg').datagrid('selectRow', editIndex);
                    },0);
                }
            }
        },
            onLoadSuccess: function(){
                $(this).datagrid('freezeRow',0).datagrid('freezeRow',1);
            }
        });
    </script>




    <script type="text/javascript">
        var editIndex = undefined;
        function endEditing(){
            if (editIndex == undefined){return true}
            if ($('#dg').datagrid('validateRow', editIndex)){
                $('#dg').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }

        function onEndEdit(index, row){
            var ed = $(this).datagrid('getEditor', {
                index: index,
                field: 'productid'
            });
            row.productname = $(ed.target).combobox('getText');
        }
        function append(){
            if (endEditing()){
                $('#dg').datagrid('appendRow',{status:'P'});
                editIndex = $('#dg').datagrid('getRows').length-1;
                $('#dg').datagrid('selectRow', editIndex)
                    .datagrid('beginEdit', editIndex);
            }
        }
        function removeit(){
            if (editIndex == undefined){return}
            $('#dg').datagrid('cancelEdit', editIndex)
                .datagrid('deleteRow', editIndex);
            editIndex = undefined;
        }
        function accept(){
            if (endEditing()){
                $('#dg').datagrid('acceptChanges');
            }
        }
        function reject(){
            $('#dg').datagrid('rejectChanges');
            editIndex = undefined;
        }
        function getChanges(){
            var rows = $('#dg').datagrid('getChanges');
            alert(rows.length+' rows are changed!');
        }
    </script>



</body>
</html>